import { useState } from "react";
import { DEFAULT_AVATAR } from "@/common/avatar";
import type { AvatarPresence, AvatarShape } from "@/components/Avatar";
import Avatar from "@/components/Avatar";
import Button from "@/components/Button";
import Checkbox from "@/components/Checkbox";
import Panel from "@/components/Panel";
import RadioGroup from "@/components/RadioGroup";

const shapes: AvatarShape[] = ["circle", "square"];
const sizes: Size[] = ["xs", "sm", "md", "lg", "xl"];
const presences: AvatarPresence[] = ["online", "offline"];

export default function Avatars() {
  const [shape, setShape] = useState<AvatarShape | undefined>(undefined);
  const [size, setSize] = useState<Size | undefined>(undefined);
  const [bordered, setBordered] = useState(false);
  const [presence, setPresence] = useState<AvatarPresence | undefined>(undefined);

  return (
    <Panel title="Avatars" className="bg-white">
      <div className="flex flex-col gap-4">
        <div className="flex gap-4">
          Shapes:
          <RadioGroup
            options={shapes.map((s) => ({ label: s, value: s }))}
            value={shape}
            onChange={(v) => setShape(v as AvatarShape)}
          />
        </div>
        <div className="flex gap-4 ">
          Size:
          <RadioGroup
            options={sizes.map((s) => ({ label: s, value: s }))}
            value={size}
            onChange={(v) => setSize(v as Size)}
          />
        </div>
        <div className="flex gap-4 ">
          Presence:
          <RadioGroup
            options={presences.map((p) => ({ label: p, value: p }))}
            value={presence}
            onChange={(v) => setPresence(v as AvatarPresence)}
          />
        </div>
        <div className="flex gap-4 ">
          Bordered:
          <Checkbox checked={bordered} onChange={(v) => setBordered(v.target.checked)} />
        </div>
        <div className="flex gap-4 ">
          <Button size={size} shape="circle">
            P
          </Button>{" "}
          <Avatar
            size={size}
            shape={shape}
            src={DEFAULT_AVATAR}
            bordered={bordered}
            presence={presence}
          />
        </div>
      </div>
    </Panel>
  );
}
